<template>
  <div class="form" :id="'form_'+config.index">
    <div
      class="form-tit"
      :style="{backgroundImage:'url('+filePath+'theme_'+themeIndex+'/title.png)'}"
    >
      <i
        :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')',backgroundImage:'url('+filePath+'theme_'+themeIndex+'/title.png)'}"
      ></i>
      <i
        :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')',backgroundImage:'url('+filePath+'theme_'+themeIndex+'/title.png)'}"
        class="right"
      ></i>
      <b :style="{color:'rgb('+themes[themeIndex].colors.light+')'}">{{config.tit}}</b>
      <!-- <span :style="{backgroundImage:'url(static/theme/'+themes[themeIndex].title+'/title.png)'}"></span> -->
    </div>
    <div class="form-short" v-if="!config.show">
      <div class="form-main" :style="{backgroundColor:'rgb('+themes[themeIndex].colors.bold+')'}">
        <div
          class="items"
          :style="{borderColor:'rgb('+themes[themeIndex].colors.main+')',backgroundColor:'rgb('+themes[themeIndex].colors.bold+')'}"
        >
          <div class="short-content">
            <p>有推广旺铺数</p>
            <h1 @click="setNumber">{{TGnumber}}</h1>
            <div
              class="subinfo"
              :style="{backgroundColor:'rgb('+themes[themeIndex].colors.heavy+')'}"
            >
              <span @click="config.show=true">完整名单，请添加小当家微信号咨询</span>
            </div>
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div
      :id="'form_'+config.index+'_'+formIndex"
      class="form-main"
      v-for="(item, formIndex) in config.items"
      :key="formIndex"
      :class="[config.items.length>1?'sub':'']"
      :style="{backgroundColor:'rgb('+themes[themeIndex].colors.bold+')'}"
      v-show="config.show"
    >
      <div
        v-if="config.items.length>1"
        class="form-main-tit"
        :style="{backgroundColor:'rgb('+themes[themeIndex].colors.bold+')',color:'rgb('+themes[themeIndex].colors.light+')'}"
      >
        <h3>
          中奖率
          <span>{{item.rate}}</span>
        </h3>
        <p>*个人奖券数／奖池总券数</p>
      </div>
      <ul
        class="items"
        :style="{borderColor:'rgb('+themes[themeIndex].colors.main+')',backgroundColor:'rgb('+themes[themeIndex].colors.bold+')'}"
      >
        <div
          v-if="config.items.length>1"
          class="items-tit"
          :style="{borderBottomColor:'rgb('+themes[themeIndex].colors.main+')',color:'rgb('+themes[themeIndex].colors.light+')'}"
        >
          <span>店铺名（奖券数）</span>
        </div>
        <li
          v-if="item.rate>config.items[formIndex].limit[0]&&item.rate<=config.items[formIndex].limit[1]"
          class="item real"
          v-for="(item, index) in formData"
          :key="index"
          :style="{color:'rgb('+themes[themeIndex].colors.heavy+')',borderRightColor:'rgb(0,0,0,0.1)'}"
        >
          <span v-show="item.tickets!=0">
            {{item.name}}
            <i v-if="config.items.length>1">({{item.tickets}})</i>
          </span>
        </li>
        <li
          class="item add first"
          :style="{color:'rgb('+themes[themeIndex].colors.heavy+')',borderRightColor:'rgb(0,0,0,0.1)'}"
        >
          <span style="opacity:0">补齐1</span>
        </li>
        <li
          class="item add last"
          :style="{color:'rgb('+themes[themeIndex].colors.heavy+')',borderRightColor:'rgb(0,0,0,0.1)'}"
        >
          <span style="opacity:0">补齐2</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import formData from "../assets/data/originData.json";
import store from "../store.js";
export default {
  props: {
    config: {
      require: true,
      type: Object
    }
  },
  data () {
    return {
      TGnumber: 666,
      remainder: null
    }
  },
  computed: {
    formData: {
      get () {
        return store.state.allListData || formData.formData;
      },
      set () { }
    },
    themes: {
      get () {
        return store.state.themes;
      },
      set () { }
    },
    themeIndex: {
      get () {
        return store.state.themeIndex;
      },
      set () { }
    },
    build: {
      get () {
        return store.state.bui;
      },
      set () { }
    },
    filePath: {
      get () {
        return store.state.filePath
      },
      set () { }
    }
  },
  methods: {
    init () {
      for (let i = 0; i < this.config.items.length; i++) {
        let dom = document.querySelectorAll(
          "#form_" + this.config.index + "_" + i + " .real"
        )
        if ((dom.length - dom.length % 3) / 3 % 2 != 0) {
          this.addFormLast(dom, i, this.themes[this.themeIndex].colors.main, this.themes[this.themeIndex].colors.bold, this.themes[this.themeIndex].colors.heavy)
        }
        this.evenColor(
          dom,
          3,
          this.themes[this.themeIndex].colors.main,
          this.themes[this.themeIndex].colors.bold,
          this.themes[this.themeIndex].colors.heavy
        );
      }
    },
    evenColor (dom, colum, color, color2, color3) {
      if (((dom.length + (colum - (dom.length % colum))) / colum) % 2 === 0) {
        for (let i = 0; i < dom.length % colum; i++) {
          // dom[dom.length - 1 - i].style.background = 'rgb(' + color + ')'
          dom[dom.length - 1 - i].setAttribute(
            "style",
            "background-color:rgb(" +
            color +
            ");border-right-color:rgb(" +
            color2 +
            ");color:rgb(" +
            color3 +
            ")"
          );
        }
      }
      for (let index = 0; index < dom.length; index++) {
        if ((index + 1) % colum === 0 && ((index + 1) / colum) % 2 === 0) {
          for (let i = 0; i < colum; i++) {
            // dom[index - i].style.background = 'rgb(' + color + ')'
            dom[index - i].setAttribute(
              "style",
              "background-color:rgb(" +
              color +
              ");border-right-color:rgb(" +
              color2 +
              ");color:rgb(" +
              color3 +
              ")"
            );
          }
        }
      }
    },
    setNumber () {
      if (this.build) {
        let value = prompt("输入旺铺数");
        if (isNaN(value) || value === '' || value < 1 || value > 10000) {
          alert('别闹')
          this.TGnumber = 666
        } else {
          this.TGnumber = value
        }
      }
    },
    addFormLast (dom, i, color, color2, color3) {
      this.remainder = dom.length % 3
      // console.log(document.querySelector("#form_" + this.config.index + "_" + i))
      if (this.remainder === 0) { }
      if (this.remainder === 1) {
        document.querySelector("#form_" + this.config.index + "_" + i + ' .item.add.first').setAttribute('style', 'display:inline-block;background-color:rgb(' + color + ');border-right-color:rgb(' + color2 + ');color:rgb(' + color3 + ');')
        document.querySelector("#form_" + this.config.index + "_" + i + ' .item.add.last').setAttribute('style', 'display:inline-block;background-color:rgb(' + color + ');border-right-color:rgb(' + color2 + ');color:rgb(' + color3 + ')')

      }
      if (this.remainder === 2) {
        document.querySelector("#form_" + this.config.index + "_" + i + ' .item.add.first').setAttribute('style', 'display:inline-block;background-color:rgb(' + color + ');border-right-color:rgb(' + color2 + ');color:rgb(' + color3 + ')')
      }
    }
  },
  watch: {
    formData (newValue, oldValue) {
      setTimeout(() => {
        this.init();
      }, 10);
    },
    themeIndex (newValue, oldValue) {
      console.log("theme change");
      setTimeout(() => {
        this.init();
      }, 10);
    }
  },
  mounted () {
    setTimeout(() => {
      this.init();
    }, 3000);
    // console.log(this.config.items)
  }
};
</script>
<style lang='stylus' scoped>
@import '../assets/style/index.styl'
.form {
  text-align center
  padding 50px 15px
  .form-tit {
    text-align center
    min-width 50%
    display inline-block
    color fontCl
    padding 50px 30px
    // background-image url('../assets/images/form_tit.png')
    background-repeat no-repeat
    background-size auto 100%
    background-position center
    font-size 24px
    position relative
    i {
      background-color mainC
      display inline-block
      height 100%
      width 33.33%
      position absolute
      // background-image url('./static/theme/2019/title.png')
      background-size auto 100%
      background-repeat no-repeat
      background-position top left
      left -6%
      top 0
      z-index 1
    }
    i.right {
      left unset
      right -6%
      background-position top right
    }
    span {
      position absolute
      top 0
      left 50%
      display inline-block
      height 100%
      width 40%
      z-index 0
      background-size auto 100%
      background-repeat no-repeat
      background-position center
      transform translateX(-50%) scaleX(2.1)
    }
    b {
      position relative
      z-index 3
    }
  }
  .form-main {
    text-align left
    padding 30px 15px
    margin 30px
    margin-top 50px
    position relative
    &:before, &:after {
      position absolute
      display inline-block
      content ''
      top 0
      bottom 0
      left 0
      right 0
      background rgba(0, 0, 0, 0.2)
      z-index 0
      border-radius 20px
      mix-blend-mode multiply
    }
    &:before {
      filter blur(8px)
      transform scaleX(0.95) scaleY(0.99)
      transform-origin center bottom
    }
    &:after {
      // background green
    }
    &.sub {
      margin-top 100px
    }
    border-radius 20px
    position relative
    .form-main-tit {
      color fontCl
      position absolute
      top -60px
      left 15px
      // background-image url('../assets/images/form_border.jpg')
      background-color #fff
      padding 15px
      border-top-right-radius 20px
      border-top-left-radius 20px
      z-index 3
      vertical-align middle
      h3 {
        font-size 28px
      }
      p {
        font-size 14px
        opacity 0.8
      }
    }
    .items {
      position relative
      z-index 1
      background-color colorH
      padding 0px 0
      border 1px solid mainC
      border-radius 0px
      // border-image-repeat repeat
      .items-tit {
        text-align center
        color fontCl
        font-size 22px
        font-weight bold
        padding 15px 0
        border-bottom 1px solid mainC
      }
      .item {
        display inline-block
        width calc(33.3333% - 0px)
        text-align center
        color fontColor2
        font-size 18px
        padding 10px
        box-sizing border-box
        margin 0
        overflow hidden
        // margin-right 1px
        // float left
        border-right 1px solid rgba(0, 0, 0, 0.1)
        white-space nowrap
        height 45px
        position relative
        vertical-align middle
        &.add {
          display none
        }
        span {
          position absolute
          top 50%
          left 50%
          transform translate(-50%, -50%)
          i {
            font-style normal
            opacity 0.7
          }
        }
        &:nth-of-type(3n) {
          // margin-right 0
          border-right 0
        }
      }
    }
  }
  .form-short {
    & .items {
      overflow hidden
      &:before, &:after {
        content ''
        display block
        height 100px
        width 100px
        background #fff
        position absolute
        border-radius 50%
        filter blur(100px)
        left 50%
        top 50%
        transform translate(-50%, -50%)
        opacity 0.8
      }
    }
    .short-content {
      position relative
      z-index 3
      padding 25px 0px
      color #fff
      text-align center
      & p {
        font-size 18px
        opacity 0.7
      }
      & h1 {
        font-size 120px
        cursor pointer
      }
      & .subinfo {
        background #000
        display inline-block
        border-radius 30px
        padding 15px 60px
        position relative
        font-size 14px
        box-shadow 2px 2px 8px rgba(0, 0, 0, 0.4) inset
        &:before, &:after {
          display inline-block
          content ''
          height 8px
          width 8px
          background #fff
          position absolute
          left 0
          top 50%
          transform translateY(-50%)
          border-radius 50%
          left 30px
          opacity 0.7
        }
        &:after {
          left unset
          right 30px
        }
        & span {
          opacity 0.8
          cursor pointer
        }
      }
    }
  }
}
</style>
